<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1" >
   .number <input v-model.number="number1" type="text">   <!--加上.number  自动键数字转换为number类型，不加全都是String类型-->
    .trim <input v-model.trim="str1" type="text">    <!--自动忽略空格-->
    .lazy <input v-model.lazy="lazy1" type="text">   <!--正常绑定model是实时改变，加上lazy就会延迟加载，鼠标点击或者按anter后才会有绑定的数据-->
    <div>
        {{lazy1}}
    </div>
    <button @click="handle"k>点击</button>

</div>
<script>
    const vueObj = new Vue({
        el: '#div1',
        data: {
            number1: "",
            str1: '',
            lazy1: "",

        },
        methods: {
            handle: function() {
                console.log(typeof (this.number1));
                console.log(this.str1);
                console.log(this.lazy1);
            }
        }
    });
</script>
</body>
</html>